<template>
  <div class="siteMaintenance">
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        新增开票通知
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!--主题内容部分开始-->
    <div class="Main">
      <el-menu :default-active="selTab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">客户开票</el-menu-item>
        <el-menu-item index="2">站点开票</el-menu-item>
        <!--        <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
      </el-menu>
      <div v-show="selTab==1">
        <p>客户信息</p>
        <div class="header">
          <ul>
            <li>
              <span>企业名称</span>
              <el-input style="width: 70%;"></el-input>
            </li>
            <li>
              <span>联系人</span>
              <el-input style="width: 70%;"></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%;"></el-input>
            </li>
            <li>
              <span>开户行</span>
              <el-input style="width: 70%;"></el-input>
            </li>
            <li>
              <span>开户账号</span>
              <el-input style="width: 70%;"></el-input>
            </li>
            <li>
              <span>纳税人识别号</span>
              <el-input style="width: 70%;"></el-input>
            </li>
          </ul>
        </div>
        <p>发货记录</p>
        <div class="intermediate">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="序号"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="客户"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="发货时间">
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
                <el-button type="text" @click="dialogVisible1=true">详情</el-button>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <p>出库记录</p>
        <div class="footer">
          <template>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
              >
              </el-table-column>
              <el-table-column
                label="序号"
              >
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="客户"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="出货时间"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="name"
                label="操作"
              >
                <el-button type="text">详情</el-button>
              </el-table-column>
            </el-table>
          </template>

        </div>
        <div class="el-button-box1">
          <el-button type="primary" @click="dialogVisible=true">汇总</el-button>
        </div>
      </div>
      <div v-show="selTab==2">
        <p>站点信息</p>
        <div class="header">
          <ul>
            <li>
              <span>站点编号</span>
              <el-select value-key="id" style="width: 70%;" v-model="siteNumberSeled" placeholder="请选择站点"
                         @change="handleChangeSite">
                <el-option
                  v-for="item in optionsSites"
                  :key="item.id"
                  :label="item.siteNumber"
                  :value="item">
                </el-option>
              </el-select>
            </li>
            <li>
              <span>站点名称</span>
              <el-input style="width: 70%;" v-model="siteSeled.siteName" disabled></el-input>
            </li>
            <li>
              <span>负责人</span>
              <el-input style="width: 70%;" v-model="siteSeled.siteResponsible" disabled></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%;" v-model="siteSeled.siteResponsiblePhone" disabled></el-input>
            </li>
            <li>
              <span>所属区域</span>
              <el-input style="width: 70%;" v-model="siteSeled.area" disabled></el-input>
            </li>
            <li>
              <span>区域负责人</span>
              <el-input style="width: 70%;" v-model="siteSeled.areaResponsible" disabled></el-input>
            </li>
          </ul>
        </div>

        <p>维修记录</p>
        <div class="footer">
          <template>
            <el-table
              :data="tableDataRepairLog"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChangeRepairLog">
              <el-table-column
                type="selection"
              >
              </el-table-column>
              <el-table-column
                type="index"
                label="序号" width="140">
              </el-table-column>
              <el-table-column
                prop="carType"
                label="车辆品牌/车型"
              >
              </el-table-column>
              <el-table-column
                prop="carNumber"
                label="车牌号"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="fuwurenyuan"
                label="维修人员"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                label="维修时间"
                show-overflow-tooltip>
                <template v-slot="scope">
                  <span>{{ renderTime(scope.row.maintainTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="状态"
                show-overflow-tooltip>
                <template v-slot="scope">
                  <span v-if="scope.row.status==4">已完成</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click=wxxq(scope.row.id)>详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
<!--        <div class="el-button-box1">-->
<!--          <el-button type="primary" >汇总</el-button>-->
<!--        </div>-->
      </div>

    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="showHuiZong(selTab)">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!--发货详情-->
    <el-dialog title="发货详情" :visible.sync="dialogVisible1" append-to-body>
      <!-- input框 -->
      <div class="conter_box1" :data="tableData">
        <ul>
          <li>
            <span>企业名称</span>
            <el-input
              v-model="value"
              style="width: 70%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>收货人</span>
            <el-input
              v-model="value"
              style="width: 55%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              v-model="value"
              style="width: 55%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>收货地址</span>
            <el-input
              v-model="value"
              style="width: 70%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>发货日期</span>
            <el-date-picker
              v-model="value"
              type="date"
              placeholder="选择日期"
              style="width: 70%"
              value-format="yyyy-MM-dd"
              :disabled="true"
            >
            </el-date-picker>
          </li>
          <li>
            <span>订单编号</span>
            <el-input
              v-model="value"
              style="width: 60%"
              :disabled="true"
            ></el-input>
          </li>
        </ul>
      </div>
      <!-- 运输方式 -->
      <div class="conter_box2">
        <p>运输方式</p>

        <!--        <el-radio v-model="xqlist.type" label=1>快递公司</el-radio>-->
        <!--        <el-radio v-model="xqlist.type" label=2>物流公司</el-radio>-->
        <!--</template>  <template>-->
        <!--       -->
        <template>
          <ul v-show="type==1">
            <li>
              <span>快递: 快递公司 :</span>
              <el-input
                v-model="value"
                readonly
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
            <li>
              <span>快递单号 :</span>
              <el-input
                v-model="value"
                readonly
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
            <li>
              <span>联系人 :</span>
              <el-input
                v-model="value"
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
            <li>
              <span>联系方式 :</span>
              <el-input
                v-model="value"
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
          </ul>
          <ul v-show="type==2">
            <li>
              <span>物流: 物流公司 :</span>
              <el-input v-model="value" disabled style="width: 60%"
              />
            </li>
            <li>
              <span>物流单号 :</span>
              <el-input
                v-model="value"
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
            <li>
              <span>联系人 :</span>
              <el-input
                v-model="value"
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
            <li>
              <span>联系方式 :</span>
              <el-input
                v-model="value"
                style="width: 60%"
                :disabled="true"
              ></el-input>
            </li>
          </ul>
        </template>
      </div>
      <div class="conter_box3">
        <p>货物信息</p>
        <template>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            class="from-fk"
          >
            <el-table-column prop="date" label="序号" width="140">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productNumber" label="产品图号"></el-table-column>
            <el-table-column prop="productName" label="产品名称"></el-table-column>
            <el-table-column prop="number" label="本次发货数量">
            </el-table-column>
          </el-table>
        </template>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible1 = false">返  回</el-button>
      </span>
    </el-dialog>
    <!--返件详情-->
    <el-dialog
      title="返件详情"
      :visible.sync="dialogVisible2"
      width="70%"
      :modal-append-to-body="false">
      <div class="header">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="序号" width="140">
            </el-table-column>
            <el-table-column
              prop="name"
              label="物料名称">
            </el-table-column>
            <el-table-column
              prop="address"
              label="图号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="返件数量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="三包期数量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="非三包期数量">
            </el-table-column>
            <el-table-column
              prop="address"
              label="调货日期">
            </el-table-column>
          </el-table>
        </template>
      </div>
      <p style="margin-top: 10px; border-bottom: 1px solid rgb(220, 222, 226); padding-bottom: 10px; font-weight: 700">
        收货地址</p>
      <div class="intermediate">
        <ul>
          <li>
            <span>企业名称</span>
            <el-input style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>收货人</span>
            <el-input style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input style="width: 70%" disabled></el-input>
          </li>
          <li>
            <span>收货地址</span>
            <el-input style="width: 70%" disabled></el-input>
          </li>
        </ul>
      </div>
      <p style="margin-top: 10px; border-bottom: 1px solid rgb(220, 222, 226); padding-bottom: 10px; font-weight: 700">
        运输方式 :</p>
      <div class="footer-kuai">
        <ul>
          <div class="pbox">
            <p>快递</p>
          </div>
          <li>
            <span>快递公司</span>
            <template>
              <el-select v-model="value" placeholder="请选择" style="width: 70%;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </li>
          <li>
            <span>快递单号</span>
            <el-input style="width: 70%;"></el-input>
          </li>

        </ul>
        <ul>
          <div class="pbox">
            <p>自送</p>
          </div>

          <li>
            <span>车牌号</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>司机姓名</span>
            <el-input style="width: 70%;"></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input style="width: 70%;"></el-input>
          </li>
        </ul>
      </div>
      <div class="footer-wu" v-show="radio == '2'">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="address"
              label="车牌号">
              <template>
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="司机姓名">
              <template>
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="司机联系方式">
              <template>
                <el-input></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    <el-button @click="dialogVisible2 = false">取 消</el-button>

  </span>
    </el-dialog>
    <!--汇总-->
    <el-dialog
      title="汇总记录"
      :visible.sync="dialogVisible"
      width="76%"
      :modal-append-to-body="false">
      <!--      <div class="el-button-box">-->
      <!--        <el-button size="small" type="primary" @click="dialogVisible3 = true">汇总</el-button>-->
      <!--      </div>-->
      <template>
        <el-table
          disabled
          :data="tableData_HuiZongLog"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号" width="140">
          </el-table-column>
          <el-table-column
            label="维修日期">
            <template v-slot="scope">
              <span>{{ renderTime(scope.row.applyTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="productName"
            label="零件名称">
          </el-table-column>
          <el-table-column
            prop="productTuhao"
            label="零件图号">
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="returnNumber"
            label="返件总量">
          </el-table-column>
          <el-table-column
            prop="danjia"
            label="单价（元）">
          </el-table-column>
          <el-table-column
            prop="guanlif"
            label="管理费（元）">
          </el-table-column>
          <el-table-column
            prop="zuoyeneirong"
            label="作业内容">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额（元）">
          </el-table-column>
          <el-table-column
            prop="chalvfei"
            label="差旅费（元）">
          </el-table-column>
          <el-table-column
            prop="qitafeiyong"
            label="其他费用">
          </el-table-column>
        </el-table>
      </template>
      <div class="piaomian">
        <span>票面总额</span>
        <el-input disabled style="width: 60%;" v-model="FaceValue"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmHuiZong(selTab)">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";

export default {
  inject: ['reload'],
  data() {
    return {
      radio: null,
      type: null,
      siteNumberSeled: "",
      tableData_HuiZongLog: [],
      tableDataRepairLog: [],
      siteSeled: {},
      optionsSites: [],
      textarea: "",
      tableData: [{}],
      value: "",
      options: [],
      selTab: '1',
      index: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      multipleSelectionIds: [],
      FaceValue: 0,
    };
  },
  created() {
    // this.index=localStorage.getItem("kehuTab")==null?0:JSON.parse(localStorage.getItem("kehuTab"));
    this.getAllSites();
  },
  methods: {
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);
    },
    confirmHuiZong(tableType) {
      let message = JSON.parse(localStorage.getItem("message"));
      if (tableType == 2) {
        let param = {
          "clientId": 0,
          "createonTime": "",
          "createonUser": message.Name,
          "createonUserid": message.Id,
          "id": 0,
          "kaipiaoMoney": this.FaceValue,
          "name": this.siteSeled.siteName,
          "partAndManpowers": [],
          "siteId": this.siteSeled.id,
          "siteMaintainIds": JSON.stringify(this.multipleSelectionIds).toString(),
          "status": 0,
          "type": tableType
        };
        axios.post("/JX_java/afferSale/addSiteTbKaiPiao", param).then(res => {
          console.log(res.data.data)
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.reload();
            this.dialogVisible = false;
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        })
      } else if (tableType == 1) {
      }

    },
    showHuiZong(tableType) {
      if (tableType == 2) {
        if (this.multipleSelectionIds.length > 0) {
          axios.post("/JX_java/afferSale/summaryDetails?siteId=" + this.siteSeled.id, this.multipleSelectionIds).then(res => {
            console.log(res.data.data)
            this.tableData_HuiZongLog = res.data.data
            let bb = 0;
            this.tableData_HuiZongLog.forEach((e, i) => {
              console.log(e)
              let a1 = this.tableData_HuiZongLog[i].money == null ? 0 : this.tableData_HuiZongLog[i].money
              let a2 = this.tableData_HuiZongLog[i].chalvfei == null ? 0 : this.tableData_HuiZongLog[i].chalvfei
              let a3 = this.tableData_HuiZongLog[i].guanlif == null ? 0 : this.tableData_HuiZongLog[i].guanlif
              let a4 = this.tableData_HuiZongLog[i].qitafeiyong == null ? 0 : this.tableData_HuiZongLog[i].qitafeiyong
              bb += (a1 + a2 + a3 + a4)
            })
            this.FaceValue = bb
            this.dialogVisible = true
          });
        }
      } else if (tableType == 1) {

      }

    },
    handleSelectionChangeRepairLog(e) {
      let a = [];
      e.forEach(item => {
        console.log(item)
        a.push(item.id)
      })
      this.multipleSelectionIds = a;
      console.log(this.multipleSelectionIds)
    },
    // dateFormat(fmt, date) {
    //   console.log(date)
    //   if (date != null) {
    //     let ret;
    //     const date1 = new Date(date);
    //     const opt = {
    //       "Y+": date1.getFullYear().toString(),        // 年
    //       "m+": (date1.getMonth() + 1).toString(),     // 月
    //       "d+": date1.getDate().toString(),            // 日
    //       "H+": date1.getHours().toString(),           // 时
    //       "M+": date1.getMinutes().toString(),         // 分
    //       "S+": date1.getSeconds().toString()          // 秒
    //       // 有其他格式化字符需求可以继续添加，必须转化成字符串
    //     };
    //     for (let k in opt) {
    //       ret = new RegExp("(" + k + ")").exec(fmt);
    //       if (ret) {
    //         fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
    //       }
    //       ;
    //     }
    //     ;
    //     return fmt;
    //   } else {
    //     return "---";
    //   }
    //
    // },
    handleChangeSite(e) {
      this.siteSeled = e
      this.tableDataRepairLog = e.siteMaintains
      console.log(e)
    },
    getAllSites() {
      axios.get("/JX_java/afferSale/getSiteMessage").then(res => {
        this.optionsSites = res.data.data
        console.log(res.data.data)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.selTab = key;
      console.log(this.selTab)
    },
    wxxq(e) {
      this.$router.push({
        path: "/SiteMaintenanceAdd", query: {
          id: e
        }
      })
    },

    //返回
    revert() {
      this.$router.go(-1);
    },
  }
}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.Main {
  width: 98%;
  //margin-left: 10px;
  margin: auto;
  background: #fff;

  p {
    //text-align: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .header {
    //border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    padding-bottom: 20px;
    margin: auto;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 28%;
        }
      }
    }
  }

  .intermediate {
    //border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    margin: auto;
    padding-bottom: 20px;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 25%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 28%;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    width: 98%;
    margin: auto;
    //height:400px;
    padding-top: 20px;
    padding-bottom: 20px;

    .footer-left {
      width: 48%;

      /deep/ .is-leaf {
        text-align: center;
        background: #ffffff;

      }


    }

    .footer-right {
      width: 51%;

      /deep/ .is-leaf {
        text-align: center;
        background: #fff;
      }
    }
  }
}

.el-button-box1 {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.bottom {
  padding-top: 20px;
  text-align: center;
}

/deep/ .is-leaf {
  text-align: center;
  background: #ffffff;
  //font-size: 16px;
}

/deep/ .cell {
  text-align: center;
}

.piaomian {
  width: 50%;
  margin-top: 20px;

  span {
    display: inline-block;
    margin-right: 10px;
  }

  .el-input {
    margin-right: 10px;
  }
}

.conter_box1 {
  padding: 5px 1% 0 1%;

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
      color: #999999;
      width: 33%;
      margin-bottom: 10px;
    }
  }
}

.conter_box2 {
  p {
    height: 40px;
    margin-top: 10px;
    // margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
      color: #999999;
      width: 50%;
      margin-bottom: 10px;
    }
  }
}

.conter_box3 {
  p {
    height: 40px;
    margin-top: 10px;
    // margin-top: 10px;
    // margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;
  }

  /deep/ .el-table th {
    background-color: #fff;
  }
}

.header {
  border-bottom: 1px solid rgb(220, 222, 226);
}

.intermediate {
  border-bottom: 1px solid rgb(220, 222, 226);
  //width: 98%;
  margin: auto;
  padding-bottom: 20px;


  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 20px;

    li {

      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;

      div {
        margin-top: 5px;
      }

      span {
        display: inline-block;
        width: 28%;
      }
    }
  }
}

.footer-top {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(220, 222, 226);

  span {
    margin-right: 10px;
  }
}

.footer-kuai {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    //align-items: center;
    color: #909399;
    margin-top: 20px;

    .pbox {
      display: flex;
      align-items: center;

      p {
        padding-right: 20px;
        margin-bottom: 10px;
      }
    }

    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
      //text-align: center;
      margin-right: 10px;
      //vertical-align: middle;
      .el-button {
        //margin-top: 18px;
      }

      span {
        display: inline-block;
        width: 28%;
        margin-bottom: 10px;
      }
    }

    .el-button-box {
      //ext-align: center; t
      display: flex;
      align-items: flex-end

    }
  }
}
</style>
